<template>
    <div class="ratings" ref="ratings">
        <div class="ratings-content">
            <div class="overview">
                <div class="overview-left">
                    <h1 class="score">{{ seller.score }}</h1>
                    <div class="title">综合评分</div>
                    <div class="rank">高于周边商家{{seller.rankRang}}</div>
                </div>
                <div class="overview-right">
                    <div class="score-wrapper">
                        <span class="title">服务态度</span>
                        <star :size="36" :score="seller.serviceScore"></star>
                        <span class="score">{{seller.serviceScore}}</span>
                    </div>
                    <div class="score-wrapper">
                        <span class="title">商品评分</span>
                        <star :size="36" :score="seller.foodScore"></star>
                        <span class="score">{{seller.foodScore}}</span>
                    </div>
                    <div class="delivery-wrapper">
                        <span class="title">送达时间</span>
                        <span class="delivery">{{ seller.deliveryPrice}}分钟</span>
                    </div>
                </div>
            </div>
            <spilit></spilit>
            <ratingselect :desc="desc" :ratings="ratings" @selRatings="filterRatings" @isContent="isContent"></ratingselect>
            <div class="rating-wrapper">
                <ul>
                    <li class="rating-item border-1px" v-for="(rating,i) in ratings" :key="i" v-show='needShow(rating.rateType,rating.text)'>
                        <div class="avatar">
                            <img :src="rating.avatar" width="28" height="28">
                        </div>
                        <div class="content">
                            <h1 class="name">{{ rating.username }}</h1>
                            <div class="star-wrapper">
                                <star :size="24" :score="rating.score" class="star"></star>
                                <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                                <p class="text">{{ rating.text }}</p>
                                <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                                    <span class="icon-thumb_up"></span>
                                    <span v-for="(item,i) in rating.recommend" :key="i" class="item">{{ item}}</span>
                                </div>
                                <div class="time">
                                    {{ rating.rateTime | formatDate}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import {formatDate} from '../../common/js/date'
import star from '../star/star'
import spilit from '../split/split.vue'
import ratingselect from '../ratingselect/ratingselect.vue'
const ALL = 2
const ERR_OK = 0
export default {
    props: {
        seller: {
            type: Object
        }
    },
    components: {
        star,
        spilit,
        ratingselect
    },
    data() {
        return {
            ratings: [],
            selectType: ALL,
            onlyContent: true,
            desc: {
                all: '全部',
                positive: '推荐',
                negative: '吐槽'
            }
        }
    },
    created() {
        this.$http.get('/api/ratings').then((result)=>{
            result = result.body;
            if(result.errno === ERR_OK){
                this.ratings = result.data
                this.$nextTick(()=>{
                    this.scroll = new BScroll(this.$refs.ratings,{
                        click: true
                    })
                })
                
            }
        })
    },
    methods: {
        isContent(bl) { // 获取子组件点击事件传递过来的数据
            this.onlyContent = bl;
            this.$nextTick(() => {
              this.scroll.refresh();
            });
        },
        filterRatings(type) { // 获取子组件点击事件传递过来的数据
            this.selectType = type;
            this.$nextTick(() => {
            this.scroll.refresh();
        });
        },
        needShow(type, text) {
            if(this.onlyContent && !text) {
                return false
            }
            if(this.selectType === ALL) {
                return true;
            }else {
                return type === this.selectType
            }
        }
    },
    filters: {
        formatDate(time){
            let date = new Date(time);
            return formatDate(date,'yyyy-MM-dd hh:mm')
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixin"
.ratings
  position absolute
  top 174px
  bottom 0
  left 0
  width 100%
  overflow hidden
  .overview
    display flex
    padding 18px 0
    .overview-left
      padding 6px 0
      flex 0 0 137
      width 137px
      border-right 1px solid rgba(7,17,27,0.1)
      text-align center
      @media only screen and (max-width 320px)
        flex 0 0 120px
        width 120px
      .score
        margin-bottom 6px
        line-height 28px
        font-size 24px
        color rgb(255,153,0)
      .title
        margin-bottom 8px
        line-height 12px
        font-size 12px
        color rgb(7,17,27)
      .rank
        line-height 10px
        font-size 10px
        color rgb(147,153,159)
    .overview-right
      flex 1
      padding 6px 0 6px 24px
      @media only screen and (max-width 320px)
        padding 6px 0 6px 6px
      .score-wrapper
        margin-bottom 8px
        font-size 0
        .title
          display inline-block
          vertical-align top
          line-height 18px
          font-size 12px
          color rgb(7,17,27)
        .star
          display inline-block
          vertical-align top 
          margin 0 12px
        .score
          display inline-block
          line-height 18px
          vertical-align top
          font-size 12px 
          color rgb(255,153,0)
      .delivery-wrapper
        font-size 0
        .title
          line-height 18px
          font-size 12px
          color rgb(7,17,27)
        .delivery
          margin-left 12px 
          font-size 12px
          color rgb(147,153,159)
  .rating-wrapper
    padding 0 18px
    .rating-item
      display flex
      padding 18px 0
      border-1px(rgba(7,17,27,0.1))
      .avatar
        flex 0 0 28px
        width 28px
        margin-right 12px
        img 
          border-radius 50%
      .content
        position relative
        flex 1
        .name
          margin-bottom 4px
          line-height 12px
          font-size 10px
          color rgb(7,17,27)
        .star-wrapper
          margin-bottom 6px
          .star
            display inline-block
            margin-right 6px
            vertical-align top
          .delivery
            display inline-block
            vertical-align top
            line-height 12px
            font-size 10px
            color rgb(147,153,159)
        .text
          line-height 18px
          margin-bottom 8px
          color rgb(7,17,27)
          font-size 12px
        .recommend
          font-size 0
          line-height 16px
          .icon-thumb_up,.item
            display inline-block
            margin 0 8px 4px 0
            font-size 9px   
          .icon-thumb_up
            color rgb(0,160,220)
          .item
            padding 0 6px
            border 1px solid rgba(7,17,27,0.1)
            border-radius 1px
            color rgb(147,153,159)
            background #fff
        .time
          position absolute
          top 0
          right 0
          line-height 12px
          font-size 10px
          color rgb(147,153,159)
</style>


